<template>
  <div
    class="i-wrapper"
    v-infinite-scroll="load"
    :infinite-scroll-disabled="disabled"
  >
    <el-container class="index-container">
      <el-main>
        <div class="artical-list">
          <artical-item v-for="p in postList" :key="p.postId" :post="p">
          </artical-item>
          <footer-loading :loading="loading" :noMore="noMore"></footer-loading>
        </div>
      </el-main>
      <el-aside direction="vertical" width="500px">
        <side-item>
          <template v-slot:title>热门文章</template>

          <router-link
            :to="{ path: `/post/${p.postId}` }"
            class="h-p-item"
            v-for="(p, index) in hotPostList"
            :key="p.postId"
          >
            <span>{{ index + 1 }}</span>
            {{ p.title }}
          </router-link>
        </side-item>
        <side-item>
          <template v-slot:title>热门板块</template>
          <router-link  v-for="f in hotForumList"   :to="{ path: `/forum/${f.id}` }"
            :key="f.forumId">
          <el-tag
            style="margin-right:5px;margin-bottom:5px"
            effect="plain"
          >
            {{ f.forumName }}
          </el-tag>
        </router-link>
        </side-item>
      </el-aside>
 
    </el-container>
  </div>
</template>

<script>
import ArticalItem from "@/components/Artical/ArticalItem.vue";
import SideItem from "@/components/SideItems/SideItem.vue";
import postApi from "@/axios/postApi";
import FooterLoading from "@/components/CommonItems/FooterLoading.vue";
import forumApi from '@/axios/forumApi';
export default {
  data() {
    return {
      postPage: {
        current: 1,
        size: 10,
        pages: 0,
      },
      postList: [],
      hotPostList: [],
      hotForumList: [],
      loading: true,
    };
  },

  components: {
    ArticalItem,
    SideItem,
    FooterLoading,
  },
  methods: {
    fetchPostList() {
      postApi
        .fetchPostList({
          current: this.postPage.current,
          size: this.postPage.size,
          orderBy:2
        })
        .then(({ data }) => {
            this.postList.push(...data.data.records);
            this.postPage.pages = data.data.pages;
          this.loading = false;
        });
    },
    load() {
      this.loading = true;
      this.postPage.current++;
      setTimeout(() => {
        this.fetchPostList();
      }, 500);
    },
  },
  computed: {
    noMore() {
      return (
        (this.postPage.current == this.postPage.pages ||
          this.postPage.pages == 0) &&
        !this.loading
      );
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  created() {
    this.fetchPostList();
    postApi.fetchHot().then(({ data }) => {
      if (data.code == this.$status.SUCCESS_CODE) {
        this.hotPostList.push(...data.data);
      } else this.$message.error("获取数据失败");
    });
    forumApi.getHot().then(({ data }) => {
      if (data.code == this.$status.SUCCESS_CODE) {
        this.hotForumList.push(...data.data);
      } else this.$message.error("获取数据失败");
    });
  },
};
</script>

<style  lang="less" scoped>
.i-wrapper {
  height: 100%;
  overflow-y: scroll;
}
.artical-list {
  margin: 0 auto;
  transform: translateX(50%);
  margin-right: 50%;
}
.h-p-item {
  display: block;
  font-size: 18px;
  color: #000;
  margin-bottom: 10px;
  span {
    margin-right: 5px;
    color: var(--text-regular);
  }
  &:nth-child(1) span {
    color: #fe2d46;
  }
  &:nth-child(2) span {
    color: #f56c6c;
  }
  &:nth-child(3) span {
    color: #e6a23c;
  }
}
</style>